<template>
  <div class="fxtb">
    <el-card>
      <div slot="header" class="card-header">
        <span>{{ this.$route.meta.title }}</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card class="mgb">
            <EchartMap></EchartMap>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <EchartBar></EchartBar>
          </el-card>
        </el-col>
        <el-col :span="12" class="mgb">
          <el-card>
            <EchartLine></EchartLine>
          </el-card>
        </el-col>
        <el-col :span="24">
          <el-card>
            <EchartBarLine></EchartBarLine>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import EchartMap from './components/EchartMap'
import EchartLine from './components/EchartLine'
import EchartBar from './components/EchartBar'
import EchartBarLine from './components/EchartBarLine'
export default {
  components: {
    EchartMap,
    EchartLine,
    EchartBar,
    EchartBarLine
  }
}
</script>

<style lang="scss" scoped>
.mgb {
  margin-bottom: 20px;
}
/deep/ .el-card__body {
  height: 500px !important;
}
</style>
